<template>
  <div class="depart-page">
    <div class="depart-tree">
      <div class="depart-title">
        <span>组织管理</span>
        <img src="../../../../assets/images/backend/edit.png" alt="" @click="departEdit">
      </div>
      <div class="depart-content">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
      </div>
    </div>
    <div class="depart-member">
      <div class="member-search">
        <div class="member-title">成员列表</div>
        <div class="member-oprea">
          <el-button type="primary" style="margin-right: 10px;" @click="addMember">
            <template #icon>
              <img src="../../../../assets/images/backend/add_member.png" alt="">
            </template>
            新建成员
          </el-button>

          <el-input v-model="formInline.name"></el-input>
          <el-button type="primary" :icon="Search" />
        </div>
      </div>
      
      <div class="table-data" v-loading="loading" style="margin-top: 30px;">
        <el-table
          :data="departMemberData"
          stripe
          borderresizable
          highlight-hover-row
          show-overflow
          keep-source
        >
          <el-table-column
            v-for="(tableItem, tableIndex) in departMemberTableColumns" :key="tableIndex"
            :prop="tableItem.field"
            :label="tableItem.label"
            :min-width="tableItem.minWidth"
          ></el-table-column>
          <el-table-column
            fixed="right"
            field="opera"
            label="操作"
            min-width="100"
          >
            <template #default="{ row }">
              <el-button
                style="color: #5897DB;"
                link
                @click="memberDetail(row)"
              >查看</el-button>
              <span>  |  </span>
              <el-button
                style="color: #5897DB;"
                link
                @click="memberEdit(row)"
              >编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="table-page">
          <el-pagination background layout="prev, pager, next" :total="dataTotal" :page-size="pageSize" :current-page="currentPage" @current-change="currentChange" />
        </div>
      </div>
    </div>


    <el-dialog title="组织管理" v-model="dialogDepartVisible">
      <div class="table-data">
        <el-table :data="dialogDepartData" style="height: 500px;">
          <el-table-column property="label" label="组织名称" min-width="150"></el-table-column>
          <el-table-column property="label" label="部门" min-width="150"></el-table-column>
          <el-table-column property="label" label="状态" min-width="150"></el-table-column>
          <el-table-column property="label" label="操作" min-width="150"></el-table-column>
        </el-table>
      </div>

      <div class="dialog-button">
        <el-button @click="dialogDepartVisible = false">取消</el-button>
        <el-button type="primary"  @click="dialogDepartVisible = false">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default { name: 'backendSystemDepart' }
</script>

<script setup>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import approvalDialog from "@/components/backend/approval.vue"

/* 路由 */
const route = useRouter()

/* 树数据 */
const data = ref([
  {
    label: '组织1',
    children: [
      {
        label: '1-1',
      },
    ],
  },
  {
    label: '组织2',
    children: [
      {
        label: '2-1',
      },
      {
        label: '2-2',
      },
    ],
  },
])

/* 树配置 */
const defaultProps = ref({
  children: 'children',
  label: 'label',
})

/* 当前查看的组织 */
const currentDepart = ref({})

/* 点击树节点 */
const handleNodeClick = (data) => {
  console.log(data)
  currentDepart.value = data
}

/* 搜索成员表单 */
const formInline = ref({
  name: "",
})

/* 成员列表分页 */
const dataTotal = ref(0)
const pageSize = ref(10)
const currentPage = ref(1)

/* 切换页码方法 */
const currentChange = (val) => {
  currentPage.value = val
  onSubmit()
}

/* 表格数据加载动画 */
const loading = ref(false)

/* 表格数据 */
const departMemberData = reactive([{
  id: 1,
  name: "张三",
  departCount: "12345",
  zhuchiren: "1395552075@qq.com",
  fayanren: "类型1",
  departTime: "启用",
}])

/* 表格字段 */
const departMemberTableColumns = reactive([
  { field: "name", label: "姓名", minWidth: "120" },
  { field: "departCount", label: "账号", minWidth: "120" },
  { field: "zhuchiren", label: "邮箱", minWidth: "140" },
  { field: "fayanren", label: "员工类型", minWidth: "140" },
  { field: "departTime", label: "状态", minWidth: "120" },
])

/* 点击搜索 */
const onSubmit = () => {
  console.log("检索")
}

/* 点击新增成员 */
const addMember = () => {
  route.push({
    path: "/backend/system-depart/add",
    query: { type: 'add', departId: currentDepart.id }
  })
}

/* 点击查看详情 */
const memberDetail = (row) => {
  let { href } = route.resolve({
    path: "/backend/system-depart/detail",
    query: { id: row.id }
  })
  window.open(href, "_blank")
}

/* 点击编辑成员 */
const memberEdit = (row) => {
  console.log(row)
  route.push({
    path: "/backend/system-depart/add",
    query: { id: row.id }
  })
}

/* 组织管理弹窗 */
const dialogDepartVisible = ref(false)

/* 点击管理组织 */
const departEdit = () => {
  dialogDepartVisible.value = true
}

</script>

<style lang='scss' scoped>
@import "@/assets/styles/backendElement.scss";
.depart-page{
  display: flex;
  height: 100%;
  .depart-tree{
    width: 322px;
    background: #fff;
    margin-right: 20px;
    height: 100%;
  }
  .depart-member{
    width: 100%;
    background: #fff;
    height: 100%;
  }
  .depart-title{
    height: 59px;
    display: flex;
    background: #F7F5F5;
    font-size: 18px;
    color: #000000;
    align-items: center;
    justify-content: space-between;
    padding: 17px 13px 17px 27px;
    font-weight: bold;
    img{
      width: 19px;
      height: 20px;
    }
  }
  .depart-content{
    padding: 14px;
    height: calc(100vh - 178px);
    overflow: auto;
  }
}

/* 树样式 */
:deep(.el-tree-node__expand-icon){
  color: var(--theme-color);
}
:deep(.el-tree-node__label){
  color: #333333;
  font-size: 16px;
  font-weight: bold;
}
:deep(.el-tree-node__children .el-tree-node__label){
  font-weight: 400;
  color: #333333;
  font-size: 14px;
}

/* 成员模块 */
.depart-member{
  padding: 18px 20px;
  .member-search{
    display: flex;
    justify-content: space-between;
  }
  .member-title{
    border-left: 3px solid var(--theme-color);
    font-size: 18px;
    font-weight: bold;
    padding-left: 8px;
  }
  .member-oprea{
    display: flex;
  }
}
.dialog-button{
  margin-top: 20px;
  text-align: center;
}
</style>